# Android Native Styling

React Native Bottom Tabs uses native platform primitives to ensure a consistent look and feel across platforms. This means that the appearance of the tabs is controlled by the native platform styling.

<div style={{ display: 'flex', justifyContent: 'center' }}>
  <video controls width="350" src="https://github.com/user-attachments/assets/8846e85b-c646-4aab-b668-59d0997ca007" />
</div>

## Expo users

Use Expo Config Plugin for Material 3 styling:

```diff
  "expo": {
+   "plugins": ["react-native-bottom-tabs"]
  }
}
```

If you want to use Material2 styling, you can pass `theme` option to the plugin:


```diff
  "expo": {
+   "plugins": [["react-native-bottom-tabs", { "theme": "material2" }]]
  }
}
```

Available options:

- `material2` - Material Design 2 styling
- `material3` - Material Design 3 styling
- `material3-dynamic` - Material Design 3 styling with dynamic theming (Material You)
- `material3-expressive` - Material Design 3 Expressive styling

## React Native Community CLI users

Inside of your `android/app/src/main/res/values/styles.xml` file you can customize the appearance of the native bottom tabs.


```diff
<resources>
- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+ <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <!-- … -->
  </style>
</resources>
```

For Material 3 Dynamic theming (Material You), you can use `Theme.Material3.DynamicColors.DayNight.NoActionBar`:

```diff
<resources>
- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+ <style name="AppTheme" parent="Theme.Material3.DynamicColors.DayNight.NoActionBar">
    <!-- … -->
  </style>
</resources>
```

If you want to use Material Design 2, you can extend from `Theme.MaterialComponents.DayNight.NoActionBar`:

```diff
<resources>
- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+ <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- … -->
  </style>
</resources>
```

For Material Design 3 Expressive styling, you can use `Theme.Material3Expressive.DayNight.NoActionBar`:

```diff
<resources>
- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+ <style name="AppTheme" parent="Theme.Material3Expressive.DayNight.NoActionBar">
    <!-- … -->
  </style>
</resources>
```

